<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="基本信息">
        <n-page-header v-if="showTenant" @back="handleBack">
          <n-grid :cols="4">
            <n-gi>
              <n-statistic label="租户状态">
                <n-tag type="success" v-if="tenantInfo.deleted === 0">
                  启用
                </n-tag>
                <n-tag type="error" v-if="tenantInfo.deleted === 1">
                  禁用
                </n-tag>
              </n-statistic>
            </n-gi>
            <n-gi>
              <n-statistic label="地址" :value="tenantInfo.tenantAddress" />
            </n-gi>
            <n-gi>
              <n-statistic label="详细地址" :value="tenantInfo.detailedAddress" />
            </n-gi>
            <n-gi>
              <n-statistic label="电话" :value="tenantInfo.tenantPhone" />
            </n-gi>
            <n-gi>
              <n-statistic label="邮箱" :value="tenantInfo.tenantEmail" />
            </n-gi>
            <n-gi>
              <n-statistic label="行业类别">
                {{ industryType.find(obj => obj.dictKey === tenantInfo.tenantIndustryType)?.dictName }}
              </n-statistic>
            </n-gi>
            <n-gi>
              <n-statistic label="信用代码" :value="tenantInfo.tenantCreditCode" />
            </n-gi>
            <n-gi>
              <n-statistic label="组织结构代码" :value="tenantInfo.tenantCode" />
            </n-gi>
            <n-gi>
              <n-statistic label="创建人" :value="tenantInfo.createdBy" />
            </n-gi>
            <n-gi>
              <n-statistic label="更新人" :value="tenantInfo.updatedBy" />
            </n-gi>
            <n-gi>
              <n-statistic label="创建时间" :value="tenantInfo.createdTime" />
            </n-gi>
            <n-gi>
              <n-statistic label="更新时间" :value="tenantInfo.updatedTime" />
            </n-gi>
            <n-gi>
              <n-statistic label="营业执照">
                <n-image width="100" v-if="tenantInfo.tenantBusinessLicense !== null"
                  :src="tenantInfo.tenantBusinessLicense" />
              </n-statistic>
            </n-gi>
          </n-grid>
          <template #title>
            <span style="text-decoration: none; color: inherit">{{ tenantInfo.tenantName }}</span>
          </template>
          <template #avatar>
            <n-avatar v-if="tenantInfo.tenantDoorPhoto !== null" :src="tenantInfo.tenantDoorPhoto" />
            <n-avatar v-if="tenantInfo.tenantDoorPhoto === null">{{ extractFirstCharacter(tenantInfo.tenantName)
            }}</n-avatar>
          </template>
          <template #footer>
            <p style="color: rgb(118, 124, 130);">企业简介</p>
            <p>{{ tenantInfo.tenantDesc }}</p>
          </template>
        </n-page-header>
      </n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard" title="法人信息">
      <n-page-header v-if="showTenant">
        <n-grid :cols="4">
          <n-gi>
            <n-statistic label="法人姓名" :value="tenantLegal.name" />
          </n-gi>
          <n-gi>
            <n-statistic label="法人电话" :value="tenantLegal.mobile" />
          </n-gi>
          <n-gi>
            <n-statistic label="证件类型">
              {{ documentType.find(obj => obj.dictKey === tenantLegal.idType)?.dictName }}
            </n-statistic>
          </n-gi>
          <n-gi>
            <n-statistic label="证件号" :value="tenantLegal.idNumber" />
          </n-gi>
          <n-gi>
            <n-statistic label="法人近照">
              <n-image width="100" v-if="tenantLegal.recentPhoto !== null" :src="tenantLegal.recentPhoto" />
            </n-statistic>
          </n-gi>
          <n-gi>
            <n-statistic label="身份证正面">
              <n-image width="100" v-if="tenantLegal.idCardUp !== null" :src="tenantLegal.idCardUp" />
            </n-statistic>
          </n-gi>
          <n-gi>
            <n-statistic label="身份证反面">
              <n-image width="100" v-if="tenantLegal.idCardDown !== null" :src="tenantLegal.idCardDown" />
            </n-statistic>
          </n-gi>
        </n-grid>
      </n-page-header>
    </n-card>
    <n-card :bordered="false" class="mt-4 proCard" title="产品信息">

    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { byTenantId } from '@/api/system/tenant';
import { getPathParam, extractFirstCharacter } from '@/utils/convert';
import { dictGroup } from '@/api/system/dict';

const router = useRouter();
const tenantInfo: any = ref({});
const tenantLegal: any = ref({});
const documentType: any = ref([]);
const industryType: any = ref([]);
const showTenant = ref<boolean>(false);
const navigateToRoute = () => {
  router.go(-1);
}
/**
 * 证件类型
 */
const getDocumentTypes = async () => {
  const data = await dictGroup({ dictGroup: 'document_type' });
  documentType.value = data;
}
/**
 * 行业类别
 */
const getIndustryTypes = async () => {
  const data = await dictGroup({ dictGroup: 'Industry_type' });
  industryType.value = data;
}
const handleBack = () => {
  navigateToRoute();
}
onMounted(async () => {
  showTenant.value = false;
  const tenantId = getPathParam();
  const data = await byTenantId({ id: tenantId });
  tenantInfo.value = data.tenant;
  tenantLegal.value = data.tenantLegal;
  getDocumentTypes();
  getIndustryTypes();
  showTenant.value = true;
});

</script>

<style lang="less" scoped></style>
